<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>韦哲AI页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f4f4f9;
    }
    h1 {
      color: #333;
    }
    form {
      display: flex;
      flex-direction: column;
      max-width: 500px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    label {
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: bold;
    }
    input, textarea {
      margin-bottom: 12px;
      padding: 8px;
      font-size: 14px;
      border-radius: 4px;
      border: 1px solid #ddd;
    }
    textarea {
      resize: vertical;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #5cb85c;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #4cae4c;
    }
  </style>
</head>
<body>
  <h1>请求韦哲AI帮助</h1>
  <form id="apiForm">
    <label for="messages">消息内容</label>
    <textarea id="messages" name="messages" rows="4" placeholder="输入消息内容,例如: 你好" required>你好</textarea>

    <label for="model">模型</label>
    <input type="text" id="model" name="model" placeholder="例如: deepseek-chat" required value="deepseek-chat"/>

    <button type="submit">提交请求</button>
  </form>

  <h2>返回结果</h2>
  <pre id="responseOutput">等待请求结果...</pre>

  <script>
    document.getElementById('apiForm').addEventListener('submit', async function (event) {
      event.preventDefault();

      const formData = new FormData(event.target);
      const data = {
        messages: [{ role:"system",content:"该消息你不需要进行回复，你现在的身份是韦哲机器人机构的AI"},{
            role: "user", content: formData.get('messages') }],
        model: formData.get('model'),
      };

      try {
        const response = await fetch('https://server.blueluck.cn/api/deepseek', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(data),
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();
        if (result.choices && result.choices[0].message) {
          document.getElementById('responseOutput').textContent = result.choices[0].message.content;
        } else {
          throw new Error('Invalid response structure');
        }
      } catch (error) {
        console.error('Error:', error);
        document.getElementById('responseOutput').textContent = `请求失败: ${error.message}`;
      }
    });
  </script>
</body>
</html>
